<template>
  <div class="ss">
    <van-nav-bar
      :border="false"
      left-arrow
      right-text="搜索"
      @click-left="() => $router.back()"
    >
      <template #title>
        <van-search
          v-model="value"
          @update:model-value="ss(value)"
          shape="round"
          placeholder="请输入搜索关键词"
        />
      </template>
    </van-nav-bar>

    <div class="hua" v-for="item in list" :key="item.id">
        <!-- 12、点击联想的商品跳转商品详情页面，通过动态路由方式传商品ID -->
        <router-link :to="'/detail/' + item.id">
      <p>{{ item.title }}</p>
      </router-link>
      <van-divider />
    </div>
  </div>
</template>
<script setup>
import axios from "@/request";
import SearchCom from "@/components/Search.vue";
import { ref } from "vue";
import shake from "@/FD/shake";

const value = ref("");
const list = ref([]);
const goods = ref([]);
// 10、封装v-model搜索组件，输入内容联想商品，接口使用mock实现
axios.get("/getSearch").then((res) => {
  // console.log(res)
  list.value = res.list;
  goods.value = res.list;
});
// 11、自定义封装防抖函数对输入内容联想商品操作进行防抖处理
const ss = shake((value) => {
    console.log(111);
  list.value = goods.value.filter((item) => item.title.includes(value));
}, 800);
</script>
<style scoped lang="scss">
.ss {
  height: 100vh;

  :deep(.van-nav-bar__text) {
    color: #000;
  }
  .hua {
    margin-left: 25px;
  }
  a{
    color: #000;
  }
}
</style>